<template>
  <div class="dagl" v-loading="isLoading">
    <div class="query">
      <el-form
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item
          label="居民姓名:"
          style="display: inline-block; width: 25%; padding-right: 20px"
        >
          <el-input
            v-model="formLabelAlign.residentName"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="证件号码:"
          style="display: inline-block; width: 25%; padding-right: 20px"
        >
          <el-input v-model="formLabelAlign.idCard" size="small"></el-input>
        </el-form-item>
        <el-form-item
          label="责任单位:"
          style="display: inline-block; width: 50%; padding-right: 20px"
        >
          <el-input
            v-model="formLabelAlign.dutyUnitUuid"
            size="small"
          ></el-input>
          <!-- <el-select
            v-model="formLabelAlign.dutyUnitUuid"
            filterable
            placeholder="请选择责任单位"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item
          label="责任医生:"
          style="display: inline-block; width: 25%; padding-right: 20px"
        >
          <el-input
            v-model="formLabelAlign.dutyUserUuid"
            size="small"
          ></el-input>
          <!-- <el-select
            v-model="formLabelAlign.dutyUserUuid"
            filterable
            clearable
            placeholder="请选择责任医生"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item
          label="签约状态:"
          style="display: inline-block; width: 25%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.status"
            filterable
            clearable
            placeholder="请选择签约状态"
            size="small"
            style="width: 100%"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option label="已签约" value="1"> </el-option>
            <el-option label="未签约" value="2"> </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item
          label="档案状态:"
          style="display: inline-block; width: 25%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.status"
            filterable
            clearable
            placeholder="请选择档案状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="生存状态:"
          style="display: inline-block; width: 25%; padding-right: 20px"
        >
          <el-select
            v-model="formLabelAlign.type"
            filterable
            clearable
            placeholder="请选择生存状态"
            size="small"
            style="width: 100%"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item
          label="人群分类:"
          style="display: inline-block; width: 100%; padding-right: 20px"
          v-if="false"
        >
          <el-checkbox-group v-model="formLabelAlign.groupType">
            <el-checkbox label="1">普通居民</el-checkbox>
            <el-checkbox label="2">0～6 岁儿童</el-checkbox>
            <el-checkbox label="4">孕产妇</el-checkbox>
            <el-checkbox label="8">65岁及以上老年人</el-checkbox>
            <el-checkbox label="16">高血压患者</el-checkbox>
            <el-checkbox label="32">2型糖尿病患者</el-checkbox>
            <el-checkbox label="64">严重精神障碍患者</el-checkbox>
            <el-checkbox label="128">肺结核患者</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item
          label="慢病分类:"
          style="display: inline-block; width: 100%; padding-right: 20px"
        >
          <el-checkbox-group v-model="formLabelAlign.riskcType">
            <el-checkbox label="年龄">年龄</el-checkbox>
            <el-checkbox label="高血压">高血压</el-checkbox>
            <el-checkbox label="高血脂">高血脂</el-checkbox>
            <el-checkbox label="高血糖">高血糖</el-checkbox>
            <el-checkbox label="肥胖">肥胖</el-checkbox>
            <el-checkbox label="家族史">家族史</el-checkbox>
            <el-checkbox label="吸烟">吸烟</el-checkbox>
            <el-checkbox label="饮酒">饮酒</el-checkbox>
            <el-checkbox label="高盐饮食">高盐饮食</el-checkbox>
            <el-checkbox label="既往史">既往史</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="get_list"
          >搜索</el-button
        >
        <el-button
          size="small"
          plain
          icon="el-icon-refresh-right"
          @click="clear"
          >重置</el-button
        >
      </div>
    </div>
    <div class="main">
      <p>
        <span style="font-weight: 900; font-size: 22px; color: #000"
          >居民档案管理列表</span
        >
        <!-- <el-button size="small" plain type="primary" style="float: right;background-color: #fff;color: rgb(47, 160, 254);">档案迁入</el-button> -->
        <el-button
          size="small"
          plain
          type="primary"
          style="
            float: right;
            background-color: #fff;
            color: rgb(47, 160, 254);
            margin-right: 15px;
          "
          @click="goto_charteDa"
          >新建档案</el-button
        >
      </p>
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 15px"
        :header-cell-style="{
          color: '#000',
          backgroundColor: 'rgb(157,201,210)',
          fontFamily: 'FangSong',
        }"
        height="400"
        border
      >
        <el-table-column prop="residentName" label="姓名">
          <template slot-scope="scope">
            <a style="color: blue" @click="goto_userInfo(scope.row.idCard)">{{
              scope.row.residentName
            }}</a>
          </template>
        </el-table-column>
        <el-table-column prop="gender" label="性别" width="60">
          <template slot-scope="scope">
            {{ scope.row.gender | six }}
          </template>
        </el-table-column>
        <el-table-column prop="dataBirth" label="出生日期">
          <template slot-scope="scope">
            <span v-if="scope.row.dataBirth">{{
              scope.row.dataBirth | time
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="idCard" label="证件号码" width="160">
        </el-table-column>
        <el-table-column prop="fillDate" label="建档时间">
          <template slot-scope="scope">
            <span v-if="scope.row.fillDate">{{
              scope.row.fillDate | time
            }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="groupType" label="人群分类" width="220">
          <template slot-scope="scope">
            {{ scope.row.groupType | groupType_to }}
            <el-tag type="success" size="small">普</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column prop="riskType" label="高危分类" width="220">
          <!-- <template slot-scope="scope">
            <span v-if="scope.row.chronicType">{{
              scope.row.chronicType 
            }}</span>
            <span v-else>-</span>
          </template> -->
        </el-table-column>
        <el-table-column prop="dutyUserName" label="责任医生">
        </el-table-column>
        <el-table-column prop="status" label="档案状态">
          <template slot-scope="scope">
            {{ scope.row.status | status_to }}
          </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              style="background-color: #fff; color: rgb(47, 160, 254)"
              @click="goto_userInfo(scope.row.idCard)"
              >档案管理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right; margin-top: 20px">
        <span style="float: left"
          >当页人数： <b style="color: red">{{ tableData.length }}</b> 总人数：
          <b style="color: red">{{ total }}</b></span
        >
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="formLabelAlign.page"
          :page-size="formLabelAlign.size"
          layout="prev, pager, next, jumper"
          :total="total"
          style="display: inline-block"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formLabelAlign: {
        page: 1,
        size: 15,
        residentName: "",
        idCard: "",
        groupType: [],
        riskcType: [],
        dutyUserUuid: "",
        dutyUnitUuid: "",
        status: "",
        type: 2,
      },
      options: [
        {
          value: "测试",
          label: "测试",
        },
      ],
      tableData: [],
      total: 0,
      isLoading: false,
    };
  },
  methods: {
    clear() {
      this.formLabelAlign = {
        page: 1,
        size: 15,
        residentName: "",
        idCard: "",
        groupType: [],
        riskcType: [],
        dutyUserUuid: "",
        dutyUnitUuid: "",
        status: "",
      };
    },
    goto_charteDa() {
      this.$router.push("/carte_da");
      // window.open("/#/carte_da");
    },
    goto_userInfo(idCard) {
      // window.open("/#/user_info?idCard=" + idCard);
      this.$router.push("/user_info?idCard=" + idCard);
    },
    get_list() {
      this.isLoading = true;
      var init = JSON.stringify(this.formLabelAlign);
      var data = JSON.parse(init);
      data.groupType = data.groupType.toString();
      data.riskcType = data.riskcType.toString();
      this.$post("/resident/pageList", data).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.records;
        this.isLoading = false;
      });
    },
    handleSizeChange(val) {},
    handleCurrentChange(val) {
      this.formLabelAlign.page = val;
      this.get_list();
    },
  },
  filters: {
    six(val) {
      var six = "";
      if (val == 1) {
        six = "男";
        return six;
      }
      if (val == 2) {
        six = "女";
        return six;
      } else {
        six = "未知";
        return six;
      }
    },
    status_to(val) {
      var status_to = "";
      if (val == 0) {
        status_to = "正常";
        return status_to;
      }
      if (val == 1) {
        status_to = "归档";
        return status_to;
      }
    },
    groupType_to(val) {
      var array = val.split(",");
      var str = [
        {
          id: 1,
          name: "普通居民",
        },
        {
          id: 2,
          name: "0-6岁儿童",
        },
        {
          id: 4,
          name: "孕产妇",
        },
        {
          id: 8,
          name: "65岁及以上老年人",
        },
        {
          id: 16,
          name: "高血压患者",
        },
        {
          id: 32,
          name: "2型糖尿病患者",
        },
        {
          id: 64,
          name: "严重精神障碍患者",
        },
        {
          id: 128,
          name: "肺结核患者",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
    chronicType_to(val) {
      if (!val) {
        return "-";
      }
      var array = val.split(",");
      var str = [
        {
          id: 1,
          name: "冠心病",
        },
        {
          id: 2,
          name: "慢阻肺",
        },
        {
          id: 3,
          name: "高血压",
        },
        {
          id: 4,
          name: "糖尿病",
        },
        {
          id: 5,
          name: "脑卒中",
        },
        {
          id: 6,
          name: "慢性肾脏病",
        },
      ];
      var newArry = [];
      for (var i in array) {
        for (var j in str) {
          if (array[i] == str[j].id) {
            newArry.push(str[j].name);
          }
        }
      }
      return newArry.toString();
    },
    time(val) {
      if (val == null || val == "") {
        return "";
      } else {
        let d = new Date(val); // val 为表格内取到的后台时间
        let month =
          d.getMonth() + 1 < 10 ? "0" + (d.getMonth() + 1) : d.getMonth() + 1;
        let day = d.getDate() < 10 ? "0" + d.getDate() : d.getDate();
        let hours = d.getHours() < 10 ? "0" + d.getHours() : d.getHours();
        let min = d.getMinutes() < 10 ? "0" + d.getMinutes() : d.getMinutes();
        let sec = d.getSeconds() < 10 ? "0" + d.getSeconds() : d.getSeconds();
        let times = d.getFullYear() + "-" + month + "-" + day;
        return times;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.dagl {
  padding: 20px;
  background-color: #fff;
  .query {
    border-bottom: 1px solid #ccc;
    padding-bottom: 20px;
    margin-bottom: 10px;
  }
}
</style>